<template>
    <sub-box>
        <breadcrumb :title="'banner 管理'"></breadcrumb>
        <div class="white-block manager" v-loading="loading">
            <el-form class="form-common" :model="ruleForm" ref="ruleForm" label-width="1.2rem">
                <el-form-item label="图片">
                    <upload :fileList.sync="ruleForm.fileList" :listType="'picture'" @change="change"></upload>
                </el-form-item>
                <el-form-item label="图片链接">
                    <el-input v-model="ruleForm.link" class="input"></el-input>
                </el-form-item>
                <el-form-item label="打开方式">
                    <el-select v-model="ruleForm.way" placeholder="请选择打开方式" class="openWay">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="text-center btns">
                    <el-button type="primary" size="large" @click="save('ruleForm')">保存</el-button>
                    <el-button size="large" @click="$router.back(-1)">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </sub-box>
</template>

<script>
    import subBox from '../../components/layout/layout-sub'
    import breadcrumb from '../../components/breadcrumb'
    import upload from '../../components/upload'

    export default {
        name: '',
        data() {
            return {
                ruleForm: {
                    fileList: [],
                    link: '',
                    way: 0
                },
                options: [
                    {
                        value: 0,
                        label: '当前页面打开'
                    },
                    {
                        value: 1,
                        label: '新标签页面打开'
                    }
                ],
                value: '',
                loading: false,
                id: ''
            }
        },
        mounted() {
            this.getDetail()
        },
        methods: {
            getDetail() {
                this.$http.get('/gsBannerManage/getOne').then(result => {
                    if (result.success) {
                        this.ruleForm = {
                            fileList: [result.data.fileInfo],
                            link: result.data.bannerPath,
                            way: result.data.openType,
                            id: result.data.id
                        }
                        this.$method.updateView()
                    }
                }).catch(() => {

                })
            },
            change(file, fileList) {
                this.ruleForm.fileList = fileList.slice(-1)
            },
            save(formName) {
                this.loading = true
                this.$http.post('/gsBannerManage/save', {
                    bannerPath: this.ruleForm.link,
                    bannerImgUrl: this.ruleForm.fileList[0] ? this.ruleForm.fileList[0].id : '',
                    openType: this.ruleForm.way,
                    id: this.ruleForm.id || 0
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.$emit('upload')
                        this.$nextTick(() => {
                            this.$method.historyBack()
                        })
                    }
                }).catch(() => {
                    this.loading = false
                })
            }
        },
        components: {
            subBox,
            breadcrumb,
            upload
        }
    }
</script>

<style scoped lang="less">
    .manager {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .form-common {
        width: 6.4rem;
        margin: 0 auto;
    }

    .openWay {
        width: 100%;
    }
</style>
